/**
 * Created by Administrator on 2018/1/5.
 */
import React, {PureComponent} from 'react';
import {connect} from 'dva';
import {Link} from 'dva/router';
import {Form, Card, Row, Col, Input, Select, Table, Button,Radio,Modal} from 'antd';
import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import ShopManageTable from '../../../components/ShopManage';
import ShopManageEdit from '../../../components/ShopManage/edit';
import styles from './ShopManage.less';
import {routerRedux} from 'dva/router';
import {powerControl} from '../../../utils/powerControl';
const FormItem = Form.Item;
const {Option} = Select;
const AuthButton = powerControl(Button);

@connect(state => ({
    shopManage: state.shopManage,
}))
@Form.create()
export default class ShopManage extends PureComponent {
    state={
        modalVisible:false,
        record:{},
    }
    componentDidMount(){
        if(this.props.location.state){
            this.props.dispatch({
                type:'shopManage/queryAll',
                payload:{id:this.props.location.state},
            })
        }else{
            this.props.dispatch({
                type:'shopManage/queryAll',
            })
        }

    }
    handleSearch=(e)=>{
        e.preventDefault();
        this.props.form.validateFields((err,values)=>{
            if(!err){
                this.props.dispatch({
                    type:'shopManage/queryAll',
                    payload:values,
                });
            }
        });
    }
    handleFormReset=()=>{
        const {form, dispatch} = this.props;
        form.resetFields();
        dispatch({
            type:'shopManage/queryAll',
            payload:{},
        });
    }
    renderSimpleForm() {
        const {getFieldDecorator} = this.props.form;
        const {shopManage} = this.props;
        return (
            <Form onSubmit={this.handleSearch} layout="inline">
                <Row gutter={{md: 8, lg: 24, xl: 48}}>
                    <Col md={8} sm={24}>
                        <FormItem label="商店ID">
                            {getFieldDecorator('id')(<Input size="default" placeholder="商店ID"/>)
                            }
                        </FormItem>
                    </Col>
                    <Col md={8} sm={24}>
                        <FormItem label="商店名称">
                            {getFieldDecorator('shopName')(<Input size="default" placeholder="商店名称"/>
                            )}
                        </FormItem>
                    </Col>
                    <Col md={8} sm={24}>
            <span className={styles.sumbitButtons}>
              <AuthButton auth="shopManage.search" type="primary" htmlType="submit" loading={shopManage.submitting}>查询</AuthButton>
              <AuthButton auth="shopManage.reset" style={{marginLeft: 8}} onClick={this.handleFormReset}>重置</AuthButton>
            </span>
                    </Col>
                </Row>
            </Form>
        );
    }

    renderForm() {
        return this.renderSimpleForm();
    }
    handleTableChange=(pagination)=>{
        const {dispatch} = this.props;
        const params = {
            currentPage: pagination.current,
            pageSize: pagination.pageSize,
        };
        dispatch({
            type: 'shopManage/queryAll',
            payload:params,
        });
    }
    handleEdit=(record)=>{
        this.setState({
            record:record,
        })
        this.handleModalVisible(true);
    }
    handleModalVisible = (flag) => {
        this.setState({
            modalVisible:!!flag,
        });
    };

    handleModalSuccess = (pagination) => {
        const {dispatch} = this.props;
        const {formValues} = this.state;
        const params = {
            currentPage: pagination.current,
            pageSize: pagination.pageSize,
            ...formValues,
        };
        dispatch({
            type: 'shopManage/queryAll',
            payload: params,
        });
    }

    handlesOk=()=>{
        this.props.form.validateFields((err,values)=>{
            console.log("参数名")
            console.log(...values);
            if(!err){
                this.props.dispatch({
                    type:'shopManage/updateShop',
                    payload:{...values,
                    id:this.state.record.id},
                    callback:(response)=>{
                        if(response.result===0){
                            this.handleModalVisible(false);
                            this.props.dispatch({
                                type:'shopManage/queryAll',
                            });
                        }else{
                            this.handleModalVisible(true);
                        }
                    }
                })
            }
        })
    }
    render() {
        const {shopManage:{data,loading},form}=this.props;
        const {getFieldDecorator}=form;
        const {modalVisible,record}=this.state;
        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 7},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 12},
                md: {span: 10},
            },
        };
        return (
            <PageHeaderLayout title="店铺管理">
                <Card bordered={false}>
                    <div className={styles.tableList}>
                        <div className={styles.tableListForm}>
                            {this.renderForm()}
                        </div>
                            <ShopManageTable
                                loading={loading}
                                handleEdit={this.handleEdit}
                                handleModalVisible={this.handleModalVisible}
                                data={data}
                                handleTableChange={this.handleTableChange}
                            />
                        <Modal
                            title="编辑店铺"
                            visible={modalVisible}
                            onCancel={()=>this.handleModalVisible(false)}
                            onOk={this.handlesOk}
                            footer={null}>
                            <ShopManageEdit ref="edit"
                                            pagination={data.pagination}
                                            record={record}
                                            handleModalVisible={this.handleModalVisible}
                                            handleModalSuccess={this.handleModalSuccess}
                            />
                        </Modal>
                        <div>

                        </div>
                    </div>
                </Card>
            </PageHeaderLayout>
        )
    }
}